<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="js/easyui/jquery.easyui.min.js"></script>
    <script src="fucs.js"></script>
    <script src="cov.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body class="easyui-layout">
<!-- top -->
<div data-options="region:'north'" style="height:40px;padding: 5px;">
    
    
    <!-- <button onclick="window.print()">保存源码</button>
    <button id="btn_Print">导出PDF</button>
    <a href="help/语法帮助.html" target="_blank" rel="noopener noreferrer">语法帮助</a> -->
    <!-- <div class="easyui-panel" style="padding:5px;"> -->
        <span>MDX编辑器</span>
        <a href="#" class="easyui-linkbutton" id="btn_saveCode">保存源码</a>
        <a href="#" class="easyui-linkbutton" id="btn_copyCode">复制源码</a>
        <a href="#" class="easyui-linkbutton" id="btn_Print">打印或导出PDF</a>
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
        <a href="help/语法帮助.html" class="easyui-linkbutton" target="_blank">语法帮助</a>
    <!-- </div> -->
    <div id="mm1" style="width:150px;">
        <div data-options="iconCls:'icon-undo'">Undo</div>
        <div data-options="iconCls:'icon-redo'">Redo</div>
        <div class="menu-sep"></div>
        <div>Cut</div>
        <div>Copy</div>
        <div>Paste</div>
        <div class="menu-sep"></div>
        <div>
            <span>Toolbar</span>
            <div>
                <div>Address</div>
                <div>Link</div>
                <div>Navigation Toolbar</div>
                <div>Bookmark Toolbar</div>
                <div class="menu-sep"></div>
                <div>New Toolbar..。</div>
            </div>
        </div>
        <div data-options="iconCls:'icon-remove'">Delete</div>
        <div>Select All</div>
    </div>
    <div id="mm2" style="width:100px;">
        <div>Help</div>
        <div>Update</div>
        <div>About</div>
    </div>
    <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
        <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
        <p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript applications。</p>
    </div>
</div>
    <!-- left -->
<div data-options="region:'west',split:true" title="MDX源码" style="width:50%;">
<textarea id="editor">
/title{MDX语法示例}
/subtitle{一个类似Markdown和Latex语法混合的自动排版系统}
/author{X.un}
/date{2020-11-13}
/BNP
/TOC


# 月历
/month{2020-10|2020年10月记事}
1//本月第1天|无所作为
2//本月第2天|无所事事
6//本月第6天|胡思乱想
8//本月第8天|无事生非

//month


# 代码块
/code{HTML代码}
<div class="code">
<span>html.js</span>
<table>
<tr>
<td>001
<td>var pp = prms.split("(");
<tr>
<td>002
<td>var tmp_name = pp[0];//函数名称
<tr>
<td>003
<td>var tmp_pms = pp[1].replace(")","")//函数形式参数
</table>
</div>
//code
/code{JS代码}
// 改良的split内循环回调处理函数
function splitEach(strObj,spliter,callback){
    var arr = strObj.split(spliter)
    for(var i=0;i<arr.length;i++){
        callback(i,arr[i])
    }
}
//code

# 步骤列表
/steps{实现一个MDX指令的步骤}
/1{纸上谈兵}
所有设计的最初思考都可以是在纸上。通过草稿纸上写写画画，可以很快明确设计的需求和实现步骤。
//1
/1{结构代码与样式实现}
写出HTML结构代码，并通过指定类名书写CSS样式，实现最终的效果出来。

//1
/1{JS代码实现}
将JS代码写出来，实现MDX指令的解析和转化。
//1
//steps



# 表格
表格是文档排版中很重要的一部分，下面是表格1
/table{学生信息表|threeline}
姓名|性别|年龄|身份证号
张三|男|24岁|12345
李四|女|55岁|24680
张三|男|24岁|12345
李四|女|55岁|24680
张三|男|24岁|12345
李四|女|55岁|24680
//table
这里是下一段，排版最重要的是设定间距。

# 分栏
/cols{2}
[color=red]张三，中国人最耳熟能详的名字。[/color]张三可能真有其人，
但更多时候与李四、[color=blue]王五一起指代不特定的某个人，揶揄或者概括常用。[/color]
[color=#999]例如古代说书人常说：那张三的李四的都来了。[/color]也常被用在文学影视作品中。
[u][bg=yellow]因此名平常普通，近来也被用来指代一个普通人群体，即“张三族”。[/bg][/u]
也常被用在文学影视作品中。[bg=red]因此名平常普通，近来也被用来指代一个普通人群体，即“张三族”。[/bg]
//cols

# 列表
## 无序列表
/ul{}
itm1
itm2
itm3
//ul
## 有序列表
/ol{}
itm1
itm2
itm3
//ol


# 注释
/* 这里是注释 */

# 变量宏
/${recs}
张三|男|24岁
李四|女|55岁
//$

# 带参宏
/$${stu(recs)}
<table class="threeline"  width="400px" cellpaiing="0" cellspacing=0>
<tr class='tr1'>
<th>姓名<th>性别<th>年龄
/for{recs,|,[name,sex,age]}
<tr>
<td>{name}<td>{sex}<td>{age}
//for
</table>
//$$

$$(stu($[recs]))


/$${div1(title,ctn)}
<div style="min-height:200px;border:1px solid #ccc;background:#fff;padding:10px;margin:10px 0px;">
<h2 style="margin:0px 0px 5px 0px;"><img src="icos/wen.png" height="40">{title}</h2>
{ctn}
</div>
//$$

/${ctn}
这里是一大段文字
//$

$$(div1(小结,$[ctn]))


## 保命题自测
/dxSet{保命题（每道题有且只有一个最佳答案，答对留狗命，答错准备跑路）}
加微信的日期和时间是（）||2020年9月26日|2020年10月10日|2020年10月11日|2020年10月5日||A.1，因为张三2
//dxSet
</textarea>
</div>
<!-- main -->
<div data-options="region:'center'">
<div class="easyui-tabs" style="width:100%;height:100%;">
    <div title="预览" data-options="iconCls:'icon-ok'">
<!-- =================存放iframe的基础源代码 =================-->
<textarea id="if_code" cols="30" rows="10">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="book.css">
        <style media="print">
            /*-不打印-*/
            .noPrint{
                display: none;
            }
            .Print{
                display: block;
            }
            /*-分页-*/
            .pageBreak{
                page-break-after: always;
                border: none;
            }
            .preView{
                width:100%; 
            }
            .preViewer{
                height:800px;
                overflow:visible;
                border:none;
                background-color: #444;
            }
            .main{
                width: 190mm;
                height: 277mm;
                border:0px;
                padding:0px;
            }
            .imgPage{
                width: 190mm;
                height: 270mm;
                max-height: 270mm;
                margin-top: -1mm;
    
                
            }
    
        </style>
    </head>
    <body>
        <div class="preViewer">
            <div class="main">
            </div>
        </div>
    </body>
    </html>
    </textarea>
    <!-- =================/存放iframe的基础源代码================= -->
        <iframe frameborder="0" name="if1"></iframe>
    </div>
    <div title="tab2"></div>
    <div title="tab3"></div>
</div>
</div>
<!-- bottom -->
<div data-options="region:'south',split:true" style="height:50px;">

</div><!-- /bottom -->
    
</div>

    
<script src="main.js"></script>
</body>
</html>